<template>
    <div>
        <el-dialog
    class="dialog"
    v-model="dialogVisible"
    :title="type == 'add' ? '添加管理员信息' :'查看管理员信息'"
    width="30%"
    top="13vh"
    :before-close="handleClose"
  >
  <el-form  :disabled="type == 'show'" :model="userInfoForm" label-width="110px" :rules="userInfoFormRules" ref="userInfoFormRef">
    <el-form-item label="本人姓名" prop="name">
        <el-input  v-model="userInfoForm.name" ></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password" v-show="type == 'add'">
        <el-input  
          v-model="userInfoForm.password"  
          type="password" 
          show-password
        ></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="confirm" v-show="type == 'add'">
        <el-input  
          v-model="userInfoForm.confirm" 
          type="text" 
          show-password>
        </el-input>
    </el-form-item>
    <el-form-item label="性别" prop="sex">
          <el-select 
            v-model="userInfoForm.sex" 
            placeholder="请选择性别"
            style="width: 100%;"
            >
            <el-option label="男" value="man" />
            <el-option label="女" value="woman" />
          </el-select>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
        <el-input  v-model="userInfoForm.age"></el-input>
    </el-form-item>
    <el-form-item label="手机" prop="phone">
        <el-input  v-model="userInfoForm.phone"></el-input>
    </el-form-item>
    <el-form-item label="地址" prop="address">
        <el-input  v-model="userInfoForm.address"></el-input>
    </el-form-item>
    <el-form-item label="工号" prop="workNumber">
        <el-input  
          v-model="userInfoForm.workNumber" 
          onkeyup="value=value.replace(/[^\d]/g,'')" 
          placeholder="只能输入数字"></el-input>
    </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancle" v-show="type == 'add'" >取消</el-button>
        <el-button type="primary" @click="handleConfirm">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
    </div>
</template>

<script setup>
import { defineProps ,defineEmits,reactive,ref,onMounted,watch} from 'vue';
import {validateVName,validatePhoneNumber,validateAge} from '@/utils/validate'
// 引入图标
import { Plus } from "@element-plus/icons-vue";
// 接收父组件传值
const props = defineProps({
    dialogVisible:false, // 是否展示
    type:'', //根据类型修改弹框标题
    adminFormInitial:{} //弹框默认信息
})
// 子传父的方法
const emits = defineEmits(['dialogShow','Confirm'])
// 弹框表单信息
const userInfoForm = reactive({
    name: '',
    password: '',
    confirm:'',
    address:'',
    phone:'',
    age:'',
    sex:'',
    address:'',
    workNumber:''
})
//创建ref
const userInfoFormRef = ref()
// 鲜花种类
const typeFlower = ref([])
//密码校验
const validatePassword = (rule, value, callback) => {
      if(!value.length){
        callback(new Error('密码为必填项'))
      }else if (value.length < 6) {
        callback(new Error('密码不能少于6位'))
      } else {
        callback()
      }
    }
// 注册页面的确认密码校验
const validateConfirm = (rule, value, callback) => {
      if(!value){
        callback(new Error('确认密码为必填项'))
      }else if(userInfoForm.password != value){
        callback(new Error('两次密码输入不一致'))
      } else {
        callback()
      }
    }
// 姓名校验
const validateName = (rule,value,callback) => {
      if(!value){
        callback(new Error('姓名为必填项'))
      }else if(!validateVName(value)){
        callback(new Error('请输入至少2位汉字的姓名(最多不超过20位)'))
      }else{
        callback()
      };
    }
// 手机校验
const validatePhone = (rule,value,callback) => {
      if(!value){
        callback(new Error('手机号为必填项'))
      }else if(!validatePhoneNumber(value)){
        callback(new Error('请输入正确的11位手机号码'))
      }else{
        callback()
      };
    }
// 年龄校验
const validateFormAge = (rule,value,callback) => {
      if(!value){
        callback(new Error('年龄为必填项'))
      }else if(!validateAge(value)){
        callback(new Error('请输入正确年龄'))
      }else{
        callback()
      };
    }
// 设置表单校验
const userInfoFormRules = reactive({
  name: [
    {
      required: true,
      trigger: 'blur',
      message: '用户名为必填项'
    }
  ],
  password: [
    {
      required: true,
      trigger: 'blur',
      validator: validatePassword
    }
  ],
  confirm: [
    {
      required: true,
      trigger: 'blur',
      validator:validateConfirm
    }
  ],
  fullname: [
    {
      required: true,
      trigger: 'blur',
      validator:validateName
    }
  ],
  address: [
    {
      required: true,
      trigger: 'blur',
      message: '确认地址为必填项'
    }
  ],
  phone: [
    {
      required: true,
      trigger: 'blur',
      validator:validatePhone
    }
  ],
  age: [
    {
      required: true,
      trigger: 'blur',
      validator:validateFormAge
    }
  ],
  address: [
    {
      required: true,
      trigger: 'blur',
      message: '地址为必填项'
    }
  ],
  workNumber: [
    {
      required: true,
      trigger: 'blur',
      message: '工号为必填项'
    }
  ],
})
// 种类标签展示
// const typeFlower = (item) =>{
//     let type = ''
//     switch(item){
//         case 'love':
//             type = '爱情鲜花'
//             break
//         case 'friend':
//             type = '友情鲜花'
//             break
//         case 'birthday':
//             type = '生日鲜花'
//             break
//         case 'congratulate':
//             type = '祝贺鲜花'
//             break
//     }
//     return type
// }
// 点击关闭的回调函数
const handleClose = () => {
    emits('dialogShow',false)
}
// 点击取消的函数
const handleCancle = () =>{
    emits('dialogShow',false)
}
// 点击确认的函数
const handleConfirm = () =>{
  if(props.type == 'add'){
    userInfoFormRef.value.validate(async (valid) => {
    if (!valid) return;
    // 向父组件中传值
    emits('dialogShow',false)
    emits('Confirm',userInfoForm,props.type)
  });
  }else{
     // 向父组件中传值
     emits('dialogShow',false)
  }
    
}
onMounted(async()=>{
    if(props.type == 'show'){
        // flowerForm = props.flowerFormInitial
        // 将信息进行赋值
        userInfoForm.name = props.adminFormInitial.name
        userInfoForm.sex = props.adminFormInitial.sex
        userInfoForm.age = props.adminFormInitial.age
        userInfoForm.phone = props.adminFormInitial.phone
        userInfoForm.address = props.adminFormInitial.address
        userInfoForm.workNumber = props.adminFormInitial.workNumber
        userInfoForm._id = props.adminFormInitial._id
        console.log(userInfoForm,'userInfoFormuserInfoForm')
    }

})
</script>

<style lang="scss" scoped>
:deep(.el-dialog){
    border-radius: 15px;
}
:deep(.el-form){
    padding-right: 70px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
:deep(.el-upload) {
  border: 1px dashed #8c939d;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
</style>